import React,{useCallback, useState} from "react";
/* 每次数据更新都会导致函数都会被重新创建一遍，导致性能下降 */

/* export default function App(){
  
 const [tex ,setTex]=useState("")
 const[list,setList]=useState([])

 const handleChange=useCallback(
    (e)=>{

        setTex(e.target.value)
      
     
      },[]
 )
 const handleClick=useCallback(
    (e)=>{
        console.log([...list,tex])
        setList([...list,tex])
        setTex("")
        
    },[]
 )
 const handledel=useCallback(
    (index)=>{
        const newList=[...list]
        newList.splice(index,1)
        setList(newList)
     
    },[]
 )
    return (
        <div>
            <input  onChange={handleChange}  value={tex} />
            <button onClick={handleClick}>添加评论</button><br/>
           评论内容：
           <ul>
              { list.map((item,index)=>
              <li key={item}>{item}  <button onClick={()=>handledel(index)}  >del</button></li>
            
               )}
           </ul>
           {!list.length&&<div>暂无评论</div>}
        </div>
    )
} */
export default function App(){
    const [name ,setName]=useState("zjb")
    const [tex ,setTex]=useState("")
    const[list,setList]=useState([])
   
    const handleChange=useCallback(
       (e)=>{
   
           setTex(e.target.value)
         
        
         },[]
    )
    const handleClick=useCallback(
       (e)=>{
           console.log([...list,tex])
           setList([...list,tex])
           setTex("")
           
       },[tex,list]
    )
    const handledel=useCallback(
       (index)=>{
           const newList=[...list]
           newList.splice(index,1)
           setList(newList)
        
       },[list]
    )
       return (
           <div>
               {name}-<button onClick={()=>{
                   setName("nihao")
               }}>chagename</button><br/>
               <input  onChange={handleChange}  value={tex} />
               <button onClick={handleClick}>添加评论</button><br/>
              评论内容：
              <ul>
                 { list.map((item,index)=>
                 <li key={item}>{item}  <button onClick={()=>handledel(index)}  >del</button></li>
               
                  )}
              </ul>
              {!list.length&&<div>暂无评论</div>}
           </div>
       )
   }